import { useState, useEffect } from 'react';
import { Modal, Table, Descriptions, message } from 'antd';
import axios from 'axios';

interface ShelfDetailProps {
  visible: boolean;
  onClose: () => void;
  shelfId: string;
}

interface ShelfDetailInfo {
  id: number;
  name: string;
  code: string;
  boxCount: number;
  skuTypeCount: number;
  skuTotalCount: number;
  remark: string;
}

interface ApiResponse {
  code: number;
  message: string;
  data: ShelfDetailInfo;
}

interface ShelfSku {
  id: string;
  boxId: string;
  skuType: string;
  skuCount: number;
  skuCode: string;
  productName: string;
}

const ShelvesDetail: React.FC<ShelfDetailProps> = ({ visible, onClose, shelfId }) => {
  const [loading, setLoading] = useState(false);
  const [detailInfo, setDetailInfo] = useState<ShelfDetailInfo | null>(null);
  const [skuList, setSkuList] = useState<ShelfSku[]>([]);

  useEffect(() => {
    if (visible && shelfId) {
      fetchShelfDetail();
    }
  }, [visible, shelfId]);

  const fetchShelfDetail = async () => {
    setLoading(true);
    try {
      // 使用相对URL路径，通过代理转发请求，避免CORS问题
      const response = await axios.get<ApiResponse>(`/api/Shelves/GetShelvesById?id=${shelfId}`, {
        // 关闭withCredentials，避免CORS问题
        withCredentials: false
      });
      
      if (response.data && response.data.code === 200) {
        console.log('货架详情数据:', response.data);
        
        // 设置货架基本信息
        setDetailInfo(response.data.data);
        
        // 目前API可能没有返回SKU列表，暂时设置为空数组
        // 如果API返回了SKU列表，可以在这里设置
        setSkuList([]);
      } else {
        message.error(response.data.message || '获取货架详情失败');
      }
    } catch (error) {
      console.error('获取货架详情失败:', error);
      message.error('获取货架详情失败');
      setSkuList([]);
    } finally {
      setLoading(false);
    }
  };

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (_: unknown, __: unknown, index: number) => index + 1,
      width: 80,
    },
    {
      title: '箱号',
      dataIndex: 'boxId',
      key: 'boxId',
    },
    {
      title: 'SKU种类',
      dataIndex: 'skuType',
      key: 'skuType',
    },
    {
      title: 'SKU数量',
      dataIndex: 'skuCount',
      key: 'skuCount',
    },
    {
      title: '产品SKU',
      dataIndex: 'skuCode',
      key: 'skuCode',
    },
    {
      title: '产品名称',
      dataIndex: 'productName',
      key: 'productName',
    },
    {
      title: 'SKU数量',
      dataIndex: 'skuCount',
      key: 'skuCount2',
    },
  ];

  return (
    <Modal
      title="货架明细"
      open={visible}
      onCancel={onClose}
      width={1000}
      footer={null}
    >
      {detailInfo && (
        <Descriptions style={{ marginBottom: 20 }}>
          <Descriptions.Item label="仓库名称">{detailInfo.name}</Descriptions.Item>
          <Descriptions.Item label="货架编号">{detailInfo.code}</Descriptions.Item>
          <Descriptions.Item label="箱子数">{detailInfo.boxCount}</Descriptions.Item>
          <Descriptions.Item label="SKU种类">{detailInfo.skuTypeCount}</Descriptions.Item>
          <Descriptions.Item label="SKU数量">{detailInfo.skuTotalCount}</Descriptions.Item>
          <Descriptions.Item label="备注">{detailInfo.remark}</Descriptions.Item>
        </Descriptions>
      )}
      
      <Table
        rowKey="id"
        columns={columns}
        dataSource={skuList}
        loading={loading}
        pagination={false}
        locale={{ emptyText: '无数据' }}
      />
    </Modal>
  );
};

export default ShelvesDetail; 